<!DOCTYPE html>
<html>
<head>
  <title>Froala Design Blocks</title>
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
  <script src="http://localhost:35729/livereload.js"></script>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

  <link type="text/css" rel="stylesheet" href="./css/froala_blocks.css">

  <style>
    #navigator {
      position: sticky;
      top: 0;
      z-index: 1000;
    }

    #navigator a {
      font-size: 14px;
    }

    #navigator + section {
      padding: 250px 0;
    }
  </style>
</head>

<body>
  <section class="fdb-block" style="background-image: url(imgs/alt_wide_1.svg);">
    <div class="container">
      <div class="row justify-content-start">
        <div class="col-8 text-left">
          <h1>Froala Design Blocks</h1>
          <p class="text-h3">Over 170 responsive design blocks ready to be used in your web or mobile apps. All blocks are based on the Bootstrap Library, and they are the building blocks for beautiful websites.</p>
          <p class="mt-5">
            <a class="btn btn-black" href="https://github.com/froala/design-blocks"><i class="fa fa-github"></i> Github Docs</a>
            <a class="btn" href="https://froala.com/design-blocks#playground">Official Website</a>
          </p>
        </div>
      </div>
    </div>
  </section>

  <section class="fdb-block p-2" id="navigator">
    <div class="container-fluid">
      <p class="m-0 text-center">
        <a class="btn btn-empty m-1" href="call_to_action.html">Call to action</a>
        <a class="btn btn-empty m-1" href="contacts.html">Contacts</a>
        <a class="btn btn-empty m-1" href="contents.html">Contents</a>
        <a class="btn btn-empty m-1" href="features.html">Features</a>
        <a class="btn btn-empty m-1" href="footers.html">Footers</a>
        <a class="btn btn-empty m-1" href="forms.html">Forms</a>
        <a class="btn btn-empty m-1" href="headers.html">Headers</a>
        <a class="btn btn-empty m-1" href="pricings.html">Pricings</a>
        <a class="btn btn-empty m-1" href="teams.html">Teams</a>
        <a class="btn btn-empty m-1" href="testimonials.html">Testimonials</a>
      </p>
    </div>
  </section>

  <div id="playground">
  </div>

  <script>
      var get = function (url, callback) {
        var xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4 && xhr.status == 200) {
            var txt = xhr.responseText;
            txt = txt.split('<body>')[1].split('</body>')[0];
            callback(txt);
          }
        }

        xhr.open("GET", url, false );
        xhr.send();
      }

    var chooseBlock = function (e) {
      e.preventDefault();

      get(this.href, function (resp) {
        document.querySelector('#playground').innerHTML = resp;
      })
    }

    var els = document.querySelectorAll('#navigator a');

    for (var i = 0; i < els.length; i++) {
      var el = els[i];

      el.addEventListener('click', chooseBlock);
    }
  </script>
</body>
</html>